import React, { Component } from 'react';
import { Text, Image, View, TextInput, TouchableOpacity } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_member_info_companyInfo } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1, MyInput2 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ExamineView } from '../components/EmptyView';
import { ChooseTimeItem } from '../components/Item';
import TimePickerUtil from '../components/TimePicker';
import CommonUtil from '../constants/CommonUtil';

export default class PerfectInformationScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.state = {
            merchname: global.companyInfo.merchname ? global.companyInfo.merchname : '',//公司名称
            desc: global.companyInfo.desc ? global.companyInfo.desc : '',//公司介绍
            jointime: global.companyInfo.jointime ? global.companyInfo.jointime : '',//成立时间
            area: global.companyInfo.area ? global.companyInfo.area : '',//地区
            order_taking_type: global.companyInfo.order_taking_type ? global.companyInfo.order_taking_type : '',//接单类型 1=来料加工，2=包工包料
            working_type: global.companyInfo.working_type ? global.companyInfo.working_type : '',//加工方式 1=设计加工，2=来图加工，3=来样加工
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {
        if (TimePickerUtil.myPicker) {
            TimePickerUtil.myPicker.hide();
        }
    };

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='完善公司信息' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onMerchnameTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 15 }}>公司名称：</Text>
                    }
                    maxLength={50}
                    placeholder='请输入公司名称'
                    value={this.state.merchname} isLast={false} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onAreaTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 15 }}>地区：</Text>
                    }
                    maxLength={50}
                    placeholder='请输入所在地区'
                    value={this.state.area} isLast={false} />
                <ChooseTimeItem
                    title='成立时间：'
                    tips='请选择公司成立时间'
                    time={this.state.jointime}
                    onChooseSuccess={(data) => {
                        this.setState({
                            jointime: data
                        })
                    }} />
                <MyInput2
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onDescTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 15 }}>公司介绍：</Text>
                    }
                    maxLength={800}
                    placeholder='(请输入您的公司介绍)'
                    value={this.state.desc} isLast={false} />
                <View>
                    <View style={{ backgroundColor: Colors.white, height: 70 * unitWidth, width: width, alignItems: 'center', flexDirection: 'row' }}>
                        <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>接单类型</Text>
                        <View style={{ flexDirection: 'row', position: 'absolute', right: 15 * unitWidth, alignItems: 'center' }}>
                            <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} activeOpacity={0.5}
                                onPress={() => {
                                    this.setState({
                                        order_taking_type: 1
                                    })
                                }}>
                                <Image style={{ width: 13 * unitWidth, height: 13 * unitWidth }}
                                    source={this.state.order_taking_type == 1 ? require('../res/me_wsxxyd1.png') : require('../res/me_wsxxyd2.png')} />
                                <Text style={{ fontSize: 13, color: Colors.color33, marginLeft: 5 * unitWidth }}>{CommonUtil.getOrderTakingType('1')}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * unitWidth }} activeOpacity={0.5}
                                onPress={() => {
                                    this.setState({
                                        order_taking_type: 2
                                    })
                                }}>
                                <Image style={{ width: 13 * unitWidth, height: 13 * unitWidth }}
                                    source={this.state.order_taking_type == 2 ? require('../res/me_wsxxyd1.png') : require('../res/me_wsxxyd2.png')} />
                                <Text style={{ fontSize: 13, color: Colors.color33, marginLeft: 5 * unitWidth }}>{CommonUtil.getOrderTakingType('2')}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                </View>
                <View style={{ backgroundColor: Colors.white, height: 70 * unitWidth, width: width, alignItems: 'center', flexDirection: 'row' }}>
                    <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>加工方式</Text>
                    <View style={{ flexDirection: 'row', position: 'absolute', right: 15 * unitWidth, alignItems: 'center' }}>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} activeOpacity={0.5}
                            onPress={() => {
                                this.setState({
                                    working_type: 1
                                })
                            }}>
                            <Image style={{ width: 13 * unitWidth, height: 13 * unitWidth }}
                                source={this.state.working_type == 1 ? require('../res/me_wsxxyd1.png') : require('../res/me_wsxxyd2.png')} />
                            <Text style={{ fontSize: 13, color: Colors.color33, marginLeft: 5 * unitWidth }}>{CommonUtil.getWorkingType('1')}</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * unitWidth }} activeOpacity={0.5}
                            onPress={() => {
                                this.setState({
                                    working_type: 2
                                })
                            }}>
                            <Image style={{ width: 13 * unitWidth, height: 13 * unitWidth }}
                                source={this.state.working_type == 2 ? require('../res/me_wsxxyd1.png') : require('../res/me_wsxxyd2.png')} />
                            <Text style={{ fontSize: 13, color: Colors.color33, marginLeft: 5 * unitWidth }}>{CommonUtil.getWorkingType('2')}</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * unitWidth }} activeOpacity={0.5}
                            onPress={() => {
                                this.setState({
                                    working_type: 3
                                })
                            }}>
                            <Image style={{ width: 13 * unitWidth, height: 13 * unitWidth }}
                                source={this.state.working_type == 3 ? require('../res/me_wsxxyd1.png') : require('../res/me_wsxxyd2.png')} />
                            <Text style={{ fontSize: 13, color: Colors.color33, marginLeft: 5 * unitWidth }}>{CommonUtil.getWorkingType('3')}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <SubmitButton1 style={{ marginTop: 40 * unitWidth, alignSelf: 'center' }} text='确定' onPress={() => {
                    this.submit();
                }} />
            </View>
        );
    }

    onMerchnameTextChange(text) {
        this.setState({
            merchname: text
        })
    }

    onAreaTextChange(text) {
        this.setState({
            area: text,
        })
    }

    onDescTextChange(text) {
        this.setState({
            desc: text
        })
    }

    submit() {
        if (this.state.merchname == '') {
            show('请输入公司名称');
            return;
        } else if (this.state.area == '') {
            show('请输入地区');
            return;
        } else if (this.state.jointime == '') {
            show('请选择成立时间');
            return;
        } else if (this.state.desc == '') {
            show('请输入公司介绍');
            return;
        }
        let params = {
            'merchname': this.state.merchname,//公司名称
            'desc': this.state.desc,//公司介绍
            'jointime': this.state.jointime,//成立时间
            'area': this.state.area,//地区
            'order_taking_type': this.state.order_taking_type,//接单类型 1=来料加工，2=包工包料
            'working_type': this.state.working_type,//加工方式 1=设计加工，2=来图加工，3=来样加工
        }
        postFetch(api_member_info_companyInfo, params, {
            success: (response) => {
                show(response.result.message);
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}